<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div>
    <el-upload :class="{'showBtn' : viewFormData.pageKey == 'VIEW'}" action="#" :drag='drag'
      :accept='JSON.stringify(accept)' :limit="limit" :http-request="customerUpload" :disabled="disabled"
      :multiple="multiple" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary" style="display:none">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="primary" @click="dialogVisible"
        v-if="showBtn">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip}}</div>
    </el-upload>
    <!-- 视频上传  -->
    <osstype uploadosstype="2" :multiple="multiple" :mime="acceptdata" v-model="showoss" :max="filesize"
      v-if="showoss" @done="reloadFile" />
  </div>
</template>

<script>
import osstype from './index.vue';
export default {
  inject: {
    viewFormData: { value: 'viewFormData', default: null },
  },
  components: { osstype },
  props: ['column', 'value'],
  data() {
    const { multiple, limit, disabled, showFileList, accept, tip, listType, drag, filesize } = this.column
    return {
      showPreview: false,
      showoss: false,
      fileList: [],
      previewImages: [],
      drag,
      accept,
      limit,
      multiple,
      disabled,
      listType,
      tip,
      filesize,
      showFileList,
      showBtn: true,
      acceptdata: ''
    }
  },
  created() {
    if (this.viewFormData.pageKey == 'VIEW') {
      this.$set(this, 'showBtn', false)
    } else {
      this.$set(this, 'showBtn', true)
    }
  },
  mounted() {
    this.acceptdata = this.accept.join(',')
    this.fileList = this.viewFormData?.modelData[this.column.prop] || []
  },
  methods: {
    customerUpload(e) {
      console.log(e)
    },
    dialogVisible() {
      this.showoss = true
    },
    handleRemove(file, fileList) {
      const uidToDelete = file.uid;
      const indexToDelete = this.viewFormData.modelData[this.column.prop].findIndex(item => item.uid === uidToDelete);
      if (indexToDelete !== -1) {
        // 找到了符合条件的元素，进行删除
        this.viewFormData.modelData[this.column.prop].splice(indexToDelete, 1);
      }
      // console.log(file, fileList, this.column);
    },
    handlePreview(file) {
      const imgeArray = ['jpg', 'jpeg', 'png', 'jpe', 'gif']
      if (imgeArray.includes(file.type)) {
        this.showPreview = true
        this.previewImages = [file.url]

        this.$ImagePreview(this.previewImages, 0, {
          closeOnClickModal: true,
          interval: 3000,
          click: (data, index) => {
            this.$message.success('点击事件' + index)
          },
          beforeClose: () => {
            this.$message.success('关闭回调')
          }
        });

      } else {
        // this.$message.waring('不支持预览')
        this.$confirm('此文件不支持预览，是否下载查看?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.open(file.url)
        })
      }

    },
    reloadFile(file_name, file_ext, file_size, file_path) {
      this.fileList.push({ name: file_name + '.' + file_ext, url: file_path, type: file_ext, size: file_size })
      const modelData = this.viewFormData.modelData || '';
      setTimeout(() => {
        modelData[this.column.prop] = this.fileList
      }, 0);
    },
    closeViewer() {
      this.showPreview = false;
      document.querySelector('body').classList.remove('el-popup-imageView--hidden')
    }
  }
}
</script>

<style lang="scss" scoped>
.showBtn {
  ::v-deep(.el-upload) {
    display: none !important;
  }
  ::v-deep(.el-upload__tip) {
    display: none !important;
  }
}
</style>
